<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格抽奖系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        h1 {
            color: #e74c3c;
            margin-bottom: 30px;
        }
        
        .container {
            display: flex;
            gap: 50px;
            max-width: 1000px;
            width: 100%;
        }
        
        .lottery-area {
            flex: 1;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .grid-item {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-size: 24px;
            font-weight: bold;
            color: #333;
            transition: all 0.3s;
        }
        
        .grid-item.active {
            background-color: #e74c3c;
            color: white;
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(231, 76, 60, 0.3);
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        #startBtn {
            background-color: #2ecc71;
            color: white;
        }
        
        #startBtn:hover {
            background-color: #27ae60;
        }
        
        #stopBtn {
            background-color: #e74c3c;
            color: white;
            display: none;
        }
        
        #stopBtn:hover {
            background-color: #c0392b;
        }
        
        .records-area {
            flex: 1;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .records-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        
        #recordsList {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .record-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        
        .record-item:last-child {
            border-bottom: none;
        }
        
        .record-time {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .record-prize {
            font-weight: bold;
            color: #e74c3c;
        }
        
        @keyframes flash {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .flash {
            animation: flash 0.3s infinite;
        }
    </style>
</head>
<body>
    <h1>九宫格抽奖系统</h1>
    
    <div class="container">
        <div class="lottery-area">
            <div class="grid-container" id="gridContainer">
                <div class="grid-item" data-index="0">一等奖</div>
                <div class="grid-item" data-index="1">二等奖</div>
                <div class="grid-item" data-index="2">三等奖</div>
                <div class="grid-item" data-index="7">四等奖</div>
                <div class="grid-item" data-index="8">开始</div>
                <div class="grid-item" data-index="3">五等奖</div>
                <div class="grid-item" data-index="6">六等奖</div>
                <div class="grid-item" data-index="5">七等奖</div>
                <div class="grid-item" data-index="4">八等奖</div>
            </div>
            
            <div class="controls">
                <button id="startBtn">开始抽奖</button>
                <button id="stopBtn">停止抽奖</button>
            </div>
        </div>
        
        <div class="records-area">
            <div class="records-title">抽奖记录</div>
            <div id="recordsList"></div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const gridItems = document.querySelectorAll('.grid-item');
            const startBtn = document.getElementById('startBtn');
            const stopBtn = document.getElementById('stopBtn');
            const recordsList = document.getElementById('recordsList');
            
            let isRunning = false;
            let currentIndex = 0;
            let speed = 100; // 初始速度(毫秒)
            let timer = null;
            let flashTimer = null;
            let roundCount = 0;
            const totalRounds = 2; // 至少跑2圈
            
            // 奖品顺序
            const prizes = [
                "一等奖", "二等奖", "三等奖", 
                "五等奖", "八等奖", "七等奖", 
                "六等奖", "四等奖", "开始"
            ];
            
            // 移动顺序(顺时针方向)
            const moveOrder = [0, 1, 2, 3, 4, 5, 6, 7, 8];
            
            // 开始抽奖
            startBtn.addEventListener('click', function() {
                if (isRunning) return;
                
                isRunning = true;
                startBtn.style.display = 'none';
                stopBtn.style.display = 'block';
                roundCount = 0;
                speed = 100;
                
                // 随机决定最终奖品(非"开始"项)
                const finalPrizeIndex = Math.floor(Math.random() * 8);
                
                startAnimation(finalPrizeIndex);
            });
            
            // 停止抽奖
            stopBtn.addEventListener('click', function() {
                if (!isRunning) return;
                
                isRunning = false;
                clearInterval(timer);
                clearInterval(flashTimer);
                
                // 移除所有高亮
                gridItems.forEach(item => {
                    item.classList.remove('active');
                    item.classList.remove('flash');
                });
                
                // 显示中奖结果
                const prize = prizes[currentIndex];
                addRecord(prize);
                
                startBtn.style.display = 'block';
                stopBtn.style.display = 'none';
            });
            
            function startAnimation(finalPrizeIndex) {
                // 初始位置
                currentIndex = 0;
                highlightItem(currentIndex);
                
                timer = setInterval(() => {
                    // 移动到下一个位置
                    currentIndex = (currentIndex + 1) % moveOrder.length;
                    
                    // 检查是否完成一圈
                    if (currentIndex === 0) {
                        roundCount++;
                        
                        // 随着圈数增加速度
                        if (roundCount > totalRounds) {
                            speed = Math.min(speed + 20, 200); // 减慢速度
                        }
                        
                        clearInterval(timer);
                        timer = setInterval(arguments.callee, speed);
                    }
                    
                    // 检查是否可以停止
                    if (roundCount >= totalRounds && currentIndex === finalPrizeIndex) {
                        setTimeout(() => {
                            stopBtn.click();
                        }, speed * 2); // 延迟停止，让用户看到结果
                    }
                    
                    highlightItem(currentIndex);
                }, speed);
            }
            
            function highlightItem(index) {
                // 移除所有高亮
                gridItems.forEach(item => {
                    item.classList.remove('active');
                });
                
                // 添加当前高亮
                const currentItem = document.querySelector(`.grid-item[data-index="${moveOrder[index]}"]`);
                currentItem.classList.add('active');
                
                // 闪烁效果
                clearInterval(flashTimer);
                currentItem.classList.add('flash');
                flashTimer = setTimeout(() => {
                    currentItem.classList.remove('flash');
                }, 300);
            }
            
            function addRecord(prize) {
                const now = new Date();
                const timeString = now.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                });
                
                const recordItem = document.createElement('div');
                recordItem.className = 'record-item';
                recordItem.innerHTML = `
                    <span class="record-prize">${prize}</span>
                    <span class="record-time">${timeString}</span>
                `;
                
                // 添加到记录列表顶部
                recordsList.insertBefore(recordItem, recordsList.firstChild);
            }
            
            // 初始化记录列表
            function initRecords() {
                for (let i = 0; i < 5; i++) {
                    const prizes = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "六等奖", "七等奖", "八等奖"];
                    const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
                    addRecord(randomPrize);
                }
            }
            
            initRecords();
        });
    </script>
</body>
</html>
